<template>
    <view :style="{ '--color': color }">
        <status-bar :title="title"></status-bar>
        <u-sticky :customNavHeight="totalHeight">
            <view class="Tab">
                <u-tabs :list="orderCount" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" :lineColor="color" @click="click"></u-tabs>
            </view>
        </u-sticky>

        <view class="List" v-for="(item, index) in pageData" :key="index" @click="orderDetails(item)">
            <view class="codeDelivery">
                <text class="code ellipsis">单号：{{ item.order_code }}</text>
                <view class="delivery">{{ Delivery(item.delivery) }}</view>
            </view>
            <text class="add_time">{{ item.add_time }}</text>
            <view class="userInfo">{{ item.uname }} {{ item.utel }}</view>
        </view>

        <emptys v-if="!pageData.length" title="暂无相关订单"></emptys>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                title: '订单',
                shop_id: '',
                page: 1,
                limit: 10,
                state: 1,
                getMore: true,
                orderCount: [],
                pageData: [],
                current: 0
            };
        },
        onLoad(opt) {
            if (opt.shop_id) this.shop_id = opt.shop_id;
            this.orderList();
        },
        methods: {
            orderList() {
                this.$http
                    .get({
                        url: '/BntApi/orderList',
                        data: {
                            shop_id: this.shop_id,
                            page: this.page,
                            limit: this.limit,
                            state: this.state
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        if (!this.orderCount.length) {
                            const orderCount = res.orderCount || [];
                            orderCount.forEach((n) => {
                                n.badge = {
                                    value: n.num
                                };
                            });
                            this.orderCount = orderCount;
                        }
                        const result = res.data || [];
                        this.page == 1 ? (this.pageData = result) : (this.pageData = [...this.pageData, ...result]);
                        if (result.length < this.limit) this.getMore = false;
                    });
            },
            click(e) {
                this.current = e.index;
                this.state = e.state;
                this.page = 1;
                this.getMore = true;
                this.$pop.pageScrollTo();
                this.orderList();
            },
            orderDetails(item) {
                const orderCount = JSON.stringify(this.orderCount);
                this.toUrl(`orderDetails?order_id=${item.order_id}&orderCount=${orderCount}`);
            },
            Delivery(delivery) {
                return delivery == 2 ? '自提' : '快递';
            }
        },
        onReachBottom() {
            if (!this.getMore) return;
            this.page++;
            this.orderList();
        },
        computed: {
            ...mapState(['color', 'totalHeight']),
            activeStyle() {
                return {
                    color: this.color,
                    fontSize: '30rpx'
                };
            },
            inactiveStyle() {
                return {
                    color: '#999'
                };
            }
        }
    };
</script>

<style lang="scss">
    page {
        background-color: $page;
        padding-bottom: 24rpx;
    }
</style>
<style lang="scss" scoped>
    .Tab {
        width: 100%;
        height: 90rpx;
        background-color: #fff;
        border-top: 1px solid #f1f1f1;
    }
    .List {
        width: 700rpx;
        background-color: #fff;
        border-radius: 10rpx;
        margin: 24rpx auto;
        padding: 20rpx;
        display: flex;
        flex-direction: column;
        .codeDelivery {
            width: 100%;
            display: flex;
            align-items: center;
            .code {
                flex: 1;
                color: #000;
                font-size: 28rpx;
            }
            .delivery {
                padding: 2rpx 6rpx;
                background-color: var(--color);
                color: #fff;
                font-size: 24rpx;
                border-radius: 6rpx;
            }
        }
        .add_time {
            color: #000;
            font-size: 28rpx;
            margin-top: 10rpx;
        }
        .userInfo {
            width: 100%;
            display: flex;
            align-items: center;
            font-size: 28rpx;
            margin-top: 10rpx;
        }
    }
</style>